<template>
  <div class="box4" ref="charts">地图组件</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
//引入中国地图的json数据
import chinaJSON from './china.json'

let charts = ref()
//注册中国地图
echarts.registerMap('china', chinaJSON as any)
onMounted(() => {
  let mychart = echarts.init(charts.value)

  mychart.setOption({
    //地图组件
    geo: {
      map: 'china',
      roam: true, //鼠标缩放的效果
      //地图的位置
      // left:0,
      top: '200px',
      // right:0,
      // bottom:0
      zoom: 1.5,
      //文字设置
      label: {
        show: true, //文字显示出来
        fontSize: '14px',
      },
      //多边形样式
      itemStyle: {
        opacity: 0.5,
      },
      //地图高亮的效果
      emphasis: {
        itemStyle: {
          color: 'skyblue',
        },
        label: {
          fontSize: '40px',
        },
      },
    },
    series: [
      {
        type: 'lines', //航线的系列
        data: [
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [119.306239, 26.075302], // 终点
            ],
            // 统一的样式设置
            lineStyle: {
              color: 'orange',
              width: 5,
            },
          },
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [114.298572, 30.584355], // 终点
            ],
            // 统一的样式设置
            lineStyle: {
              color: 'yellow',
              width: 5,
            },
          },
        ],
        //开启动画特效
        effect: {
          show: true,
          symbol: 'arrow',
          color: 'black',
          symbolSize: 10,
        },
      },
    ],
  })
})
</script>

<style lang="scss" scoped></style>
